<template>
  <div class="next-update">
    <el-card>
      <!-- 筛选栏 -->
      <el-form :inline="true" :model="filters" class="filter-form" size="small">
        <el-form-item label="地域：">
          <el-select
            v-model="filters.region"
            placeholder="全部"
            style="width: 100px"
          >
            <el-option label="全部" value="全部" />
            <el-option label="安庆市-太湖县" value="安庆市-太湖县" />
            <el-option label="合肥市-巢湖市" value="合肥市-巢湖市" />
            <el-option label="安庆市-怀宁县" value="安庆市-怀宁县" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类：">
          <el-select
            v-model="filters.category"
            placeholder="超限队伍"
            style="width: 120px"
          >
            <el-option label="全部分类" value="全部分类" />
            <el-option label="超限队伍" value="超限队伍" />
            <el-option label="其他队伍" value="其他队伍" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="filters.subCategory" placeholder="请选择" style="width: 120px">
            <el-option label="超限队伍" value="超限队伍" />
            <el-option label="新城超限队伍" value="新城超限队伍" />
            <el-option label="其他队伍" value="其他队伍" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="专业：">
          <el-select
            v-model="filters.major"
            placeholder="全部专业"
            style="width: 120px"
          >
            <el-option label="全部专业" value="全部专业" />
            <el-option label="特长名称" value="特长名称" />
          </el-select>
        </el-form-item>
        <el-form-item label="输入查询">
          <el-input
            v-model="filters.keyword"
            placeholder="关键词"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="filters.date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
        <el-table-column prop="index" label="序号" width="60" align="center" />
        <el-table-column prop="region" label="地市" width="120" />
        <el-table-column prop="category" label="分类" width="180" />
        <el-table-column prop="name" label="姓名" width="80" />
        <el-table-column prop="teamDuty" label="队内职务" width="80" />
        <el-table-column prop="idNumber" label="身份证号" width="160" />
        <el-table-column prop="ethnic" label="民族" width="60" />
        <el-table-column prop="unitDuty" label="单位职务" width="80" />
        <el-table-column
          prop="major"
          label="专业特长（相关资质）"
          width="140"
        />
        <el-table-column prop="isFiveCerts" label="是否五证人员" width="80" />
        <el-table-column prop="phone" label="联系电话" width="120" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <span
              :style="{
                color: scope.row.status === '已归档' ? '#13ce66' : '#f56c6c',
              }"
              >{{ scope.row.status }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-link type="primary" @click="onDetail(scope.row)">详情</el-link>
            <el-link
              type="primary"
              @click="onEdit(scope.row)"
              style="margin-left: 8px"
              >修改</el-link
            >
            <el-link
              type="danger"
              @click="onDelete(scope.row)"
              style="margin-left: 8px"
              >删除</el-link
            >
            <el-link
              type="success"
              @click="onJoin(scope.row)"
              style="margin-left: 8px"
              >入队</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin: 16px 0 0 0; text-align: right">
        <el-pagination
          background
          layout="prev, pager, next, total, sizes"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          @current-change="(val) => (currentPage.value = val)"
          @size-change="(val) => (pageSize.value = val)"
        />
        <span style="margin-left: 16px; color: #888">共1234条 每页显示</span>
        <el-select
          v-model="pageSize"
          size="small"
          style="width: 60px; margin-left: 4px"
        >
          <el-option
            v-for="size in [10, 20, 50, 100]"
            :key="size"
            :label="size"
            :value="size"
          />
        </el-select>
        <span style="color: #888">条</span>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

const filters = ref({
  region: "全部",
  category: "超限队伍",
  subCategory: "超限队伍",
  major: "全部专业",
  keyword: "",
  date: "",
});

const tableData = ref([
  {
    index: "001",
    region: "安庆市-太湖县",
    category: "超限队伍-新城超限队伍",
    name: "冯亚亚",
    teamDuty: "队长",
    idNumber: "330600193011102658",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "138 2143 8256",
    status: "已归档",
  },
  {
    index: "002",
    region: "安庆市-怀宁县",
    category: "超限队伍-新城超限队伍",
    name: "赵毅",
    teamDuty: "队员",
    idNumber: "330600193011085321",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "157 9050 8835",
    status: "已归档",
  },
  {
    index: "003",
    region: "合肥市-巢湖市",
    category: "超限队伍-新城超限队伍",
    name: "王勇",
    teamDuty: "队员",
    idNumber: "2202319905131271",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "177 9602 7865",
    status: "已归档",
  },
  {
    index: "004",
    region: "安庆市-怀宁县",
    category: "基因检测队伍-医士和护士超限队伍",
    name: "李明",
    teamDuty: "队员",
    idNumber: "2202319901312617",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "156 7380 3762",
    status: "已归档",
  },
  {
    index: "005",
    region: "安庆市-怀宁县",
    category: "特检队伍-医士和护士超限队伍",
    name: "王伟",
    teamDuty: "队员",
    idNumber: "532622199301201234",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "181 1318 4650",
    status: "已归档",
  },
  {
    index: "006",
    region: "安庆市-太湖县",
    category: "超限队伍-医士和护士超限队伍",
    name: "李强",
    teamDuty: "队员",
    idNumber: "532622199301201235",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "181 2311 2935",
    status: "待审核",
  },
  {
    index: "007",
    region: "安庆市-太湖县",
    category: "超限队伍-医士和护士超限队伍",
    name: "冯亚亚",
    teamDuty: "队员",
    idNumber: "150521982308247371",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "181 2310 4133",
    status: "待审核",
  },
  {
    index: "008",
    region: "安庆市-太湖县",
    category: "超限队伍-医士和护士超限队伍",
    name: "王建林",
    teamDuty: "队员",
    idNumber: "150521982308247371",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "187 9017 0966",
    status: "待审核",
  },
  {
    index: "009",
    region: "安庆市-怀宁县",
    category: "超限队伍-医士和护士超限队伍",
    name: "赵文凯",
    teamDuty: "队员",
    idNumber: "621191980718016667",
    ethnic: "汉",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "159 7011 0515",
    status: "待审核",
  },
  {
    index: "010",
    region: "安庆市-太湖县",
    category: "新城超限队伍-医士和护士超限队伍",
    name: "冯亚亚",
    teamDuty: "队员",
    idNumber: "370611199300124365",
    ethnic: "东乡",
    unitDuty: "工程师",
    major: "特长名称",
    isFiveCerts: "否",
    phone: "153 2548 5315",
    status: "待审核",
  },
]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(1234);

const onSearch = () => {
  // 查询逻辑
};
const onReset = () => {
  filters.value = {
    region: "全部",
    category: "超限队伍",
    subCategory: "超限队伍",
    major: "全部专业",
    keyword: "",
    date: "",
  };
};
const onDetail = (row) => {
  // 详情逻辑
};
const onEdit = (row) => {
  // 修改逻辑
};
const onDelete = (row) => {
  // 删除逻辑
};
const onJoin = (row) => {
  // 入队逻辑
};
</script>

<style scoped>
.next-update {
  padding: 16px;
}
.filter-form {
  margin-bottom: 10px;
}
</style> 